<template>
  <div ref="element" class="detail" :class="{ mobile: isMobile }">
    <placeholder :loading="fetching" @after-enter="handleContentAnimateDone">
      <template #loading>
        <div class="skeleton" key="skeleton">
          <skeleton-line class="title" />
          <skeleton-paragraph class="content" :lines="9" line-height="1.2em" />
        </div>
      </template>
      <template #default>
        <div class="knowledge" key="knowledge">
          <h2 class="title">{{ article?.title }}</h2>
          <div class="article-meta">
            <span v-if="article.create_at">
              <i class="iconfont icon-time" />
              {{ timeAgo(article.create_at) }}
            </span>
            <span>
              <i class="iconfont icon-eye" />
              {{ article.meta?.views }}
            </span>
            <span>
              <i class="iconfont icon-comment" />
              {{ article.meta?.comments }}
            </span>
            <span>
              <i class="iconfont icon-zan" />
              {{ article.meta?.likes }}
            </span>
          </div>
          <div class="markdown-html" v-html="content" />
        </div>
      </template>
    </placeholder>
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { timeAgo } from "@/transforms/moment";
import SkeletonLine from "@/components/skeleton/line.vue";
import SkeletonParagraph from "@/components/skeleton/paragraph.vue";
import { markdownToHTML } from "@/transforms/markdown";
import { useEnhandle } from '@/enhandle';

export default defineComponent({
  name: 'ArticleContent',
  components: {
    SkeletonLine,
    SkeletonParagraph,
  },
  props: {
    article: Object,
    fetching: {
      type: Boolean,
      required: true
    }
  },
  setup(props) {
    const { isMobile } = useEnhandle()
    const content = computed(() => {
      const { content } = props.article;
      if (!content) return "";
      return markdownToHTML(content);
    });

    const handleContentAnimateDone = () => { }
    return {
      isMobile,
      timeAgo,
      handleContentAnimateDone,
      content
    }
  }
})
</script>

<style lang="scss" scoped>
.detail {
  padding: 1rem 2rem;
  position: relative;
  overflow: hidden;
  height: auto;
  transition: height $transition-time-normal;

  .skeleton {
    .title {
      width: 60%;
      height: 26px;
      margin: 2rem auto;
    }

    .content {
      margin-top: 3rem;
      margin-bottom: 1rem;
    }
  }

  .oirigin {
    position: absolute;
    top: -11px;
    left: -29px;
    transform: rotate(-45deg);
    width: 7rem;
    height: 4rem;
    line-height: 5.8rem;
    text-align: center;
    text-transform: uppercase;
    transform-origin: center;
    color: $text-reversal;
    font-weight: bold;
    font-size: $font-size-small;

    &.self {
      background-color: rgba($accent, 0.8);
    }
    &.other {
      background-color: rgba($red, 0.8);
    }
    &.hybrid {
      background-color: rgba($primary, 0.8);
    }
  }

  .knowledge {
    user-select: text;

    .title {
      margin: 1em 0 1.5em 0;
      text-align: center;
      font-weight: 700;
      font-size: $font-size-h2 * 0.95;
    }

    .article-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      padding-bottom: 5px;
      border-bottom: 1px solid #e9eaed;
      text-align: center;
      color: $text;
      span {
        margin-right: 8px;
        vertical-align: middle;
      }
    }

    .markdown-html {
      .google-auto-placed {
        margin-bottom: $sm-gap;
      }
    }

    .readmore {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: $gap;

      .readmore-btn {
        width: 80%;
        text-align: center;
        line-height: 3rem;
        color: $text-secondary;
        background-color: $module-bg-darker-1;
        @include background-transition();
        @include radius-box($xs-radius);

        &[disabled] {
          cursor: no-drop;
        }

        &:hover {
          background-color: $primary;
          color: $text-reversal;
        }

        .iconfont {
          margin-left: $sm-gap;
        }
      }
    }
  }

  &.mobile {
    padding: $gap $lg-gap;

    > .oirigin {
      font-size: $font-size-base;
    }

    > .knowledge {
      > .content {
        pre {
          padding-left: 0;

          > .code-lines {
            display: none;
          }
        }
      }
    }
  }
}
</style>
